import React, { useState } from "react";
import { Layout } from "antd";
import { useLocation } from "react-router-dom"; // 引入 useLocation
import "./AppIndex.less";
import {
  PromptDirectoryConfig,
  PromptDirectoryPreview,
} from "./components/PromptDirectory/PromptDirectory";
const { Header, Sider, Content } = Layout;

interface AppIndexProps {
  [key: string]: any;
}
const headerContent = (props: AppIndexProps) => {
  return (
    <div className="app-header-content">
      <h1>{props.appName}</h1>
      <p>当前用户：{props.user.name}</p>
    </div>
  );
};
const siderContent = (
  props: AppIndexProps & { onMenuClick: (key: string) => void }
) => {
  return (
    <div className="app-sider-content">
      <h2>菜单区域{props.activeKey}</h2>
      <ul>
        <li onClick={() => props.onMenuClick("1")}>菜单项 1</li>
        <li onClick={() => props.onMenuClick("2")}>菜单项 2</li>
        <li onClick={() => props.onMenuClick("3")}>菜单项 3</li>
      </ul>
    </div>
  );
};
const configContent = (props: AppIndexProps) => {
  return (
    <div className="app-config-content">
      <h2>配置区域</h2>
      <p>当前用户：{props.user.name}</p>
    </div>
  );
};
const previewContent = (props: AppIndexProps) => {
  return (
    <div className="app-preview-content">
      <h2>预览区域</h2>
      <p>应用：{props.appName}</p>
    </div>
  );
};
const AppIndex: React.FC<AppIndexProps> = () => {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const appId = query.get("appId");

  const [activeKey, setActiveKey] = useState("1");

  if (!appId) {
    return (
      <div className="error-page">
        <h1>错误</h1>
        <p>未找到应用 ID，请检查 URL。</p>
      </div>
    );
  }
  const [sharedProps, setSharedProps] = useState({
    appName: "智能体应用",
    user: { name: "管理员", role: "admin" },
    activeKey,
    appId,
    prePrompt: "提示词",
  });

  const handleMenuClick = (key: string) => {
    setActiveKey(key);
  };

  return (
    <Layout className="app-index">
      <Header className="app-header">{headerContent(sharedProps)}</Header>
      <Layout>
        <Sider width={260} className="app-sider">
          {siderContent({ ...sharedProps, onMenuClick: handleMenuClick })}
        </Sider>
        <Content className="app-content">
          <div className="config-area">
            <PromptDirectoryConfig
              sharedProps={sharedProps}
              onChange={(value) => {
                console.log("配置已更新", sharedProps);
                setSharedProps({ ...sharedProps, prePrompt: value });
              }}
            />
          </div>
          <div className="preview-area">
            <PromptDirectoryPreview sharedProps={sharedProps} />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default AppIndex;
